<template>
  <f-edit-table-sub ref="table" v-bind="options">
    <template #sub="{ row }">
      <div>{{ row }}</div>
    </template>
  </f-edit-table-sub>
</template>
<script setup lang="ts">
import { h, reactive, ref } from 'vue';
const table = ref();
let list = new Array(100)
  .fill(null)
  .map((item, index) => ({ uid: index, name1: 'name2-' + index, name2: 10000 }));
function handler(type, data: any, checked?: boolean) {
  return new Promise((resolve) => {
    if (type == 'edit') {
      list = list.map((item) => (item.uid == data.uid ? { ...data, $opType: void 0 } : item));
    } else if (type == 'remove') {
      list = list.filter((item) => item.uid != data.uid);
    } else if (type == 'add') {
      list.unshift({ ...data, name7: 100000, uid: Math.random(), $opType: void 0 });
    } else if (type == 'removeBatch') {
      list = list.filter((item) => !data.find((d) => d.uid == item.uid));
    } else if (type == 'switch') {
      list = list.map((item) => {
        if (data.uid == item.uid) {
          return {
            ...item,
            isEnabled: checked,
            $opType: void 0,
            id: void 0,
            loading_switch_isEnabled: void 0
          };
        }
        return item;
      });
    }
    setTimeout(() => {
      resolve(true);
    }, 800);
  });
}
const options = reactive({
  title: () => {
    return h('span', '编辑表格-vnode 或者字符串');
  },
  tableSlots: {
    toolbarLeft: (checkedRows) => h('div', 'left:' + checkedRows.length),
    toolbarRight: () => h('div', 'right')
  },
  table: {
    pagerConfig: {
      enabled: true,
      autoHidden: true,
      pageSize: 50,
      pageSizes: [10, 20, 50, 100, 200, 500, 1000]
    },
    forms: [
      {
        title: '查询1',
        field: 'x1',
        type: 'input',
        props: {
          disabled: true
        }
      },
      { title: '查询1', field: 'x2', type: 'input' },
      { title: '查询1', field: 'x3', type: 'input' },
      { title: '查询1', field: 'x4', type: 'input' },
      { title: '查询1', field: 'x5', type: 'input' }
    ],
    columns: [
      {
        width: 200,
        title: '字段1',
        field: 'name1',

        type: 'expand',
        renderExpand: ({ row }) => {
          return h('div', { class: 'px15 py15' }, '展开内容' + row.name1);
        }
      },
      { width: 200, title: '字段2', field: 'name2', type: 'money' },
      {
        width: 200,
        title: '字段3',
        field: 'name3',
        editType: 'input'
      },
      { width: 200, title: '字段4', field: 'name4', editType: 'input' },
      { width: 200, title: '字段5', field: 'name5', editType: 'input', required: true },
      {
        width: 200,
        title: '字段6',
        field: 'name6',
        editType: 'input',
        props: ({ row }) => {
          return {
            disabled: row['$opType'] == 'edit'
          };
        }
      },
      { width: 200, title: '字段7', field: 'name7', type: 'money' },
      { width: 200, title: '字段7', field: 'name71', type: 'money' },
      { width: 200, title: '字段7', field: 'name72', type: 'money' },
      { width: 200, title: '字段7', field: 'name73', type: 'money' },
      { width: 200, title: '字段7', field: 'name74', type: 'money' },
      {
        width: 200,
        title: '字段7',
        editType: 'input',
        required: true,
        field: 'name75',
        type: 'money'
      }
    ],
    query: (a, b, c) => {
      console.log('query ', a, b, list);
      return Promise.resolve({
        pageInfo: {
          total: 1000,
          page: 1,
          currentPage: 1
        },
        data: JSON.parse(JSON.stringify(list))
      });
    }
  },

  apis: {
    remove: (data) => handler('remove', data),
    removeBatch: (data) => handler('removeBatch', data),
    add: (data) => handler('add', data),
    edit: (data) => handler('edit', data),
    switch: (checked, data) => handler('switch', data, checked)
  },
  actions: [
    {
      label: '按钮1',
      type: 'default',
      click: (e, c) => {
        table.value.reload();
      }
    }
  ],
  sub: {
    title: '商品明细'
  }
});
</script>
